<template>
  <div>

    <div>
      <el-form :model="emp"
               label-width="170px"
               :rules="rules"
               ref="empForm">
        <el-row>
          <!-- 一列 -->
          <el-col :span="8">
            <div>

              <el-form-item label="姓名:"
                            prop="emName">
                <el-input size="medium"
                          style="width: 260px"
                          prefix-icon="el-icon-edit"
                          auto-complete="off"
                          v-model="emp.emName"
                          placeholder="请输入员工姓名"></el-input>
              </el-form-item>

              <el-form-item label="证件类型:"
                            prop="emIdCardType">
                <el-select v-model="emp.emIdCardType"
                           placeholder="请选择证件类型"
                           size="medium"
                           style="width: 260px;">
                  <el-option v-for="item in idCardTypes"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="出生日期:"
                            prop="emBirthday">
                <el-date-picker v-model="emp.emBirthday"
                                size="medium"
                                type="date"
                                style="width: 260px;"
                                placeholder="出生日期">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="血型:"
                            prop="emBloodType">
                <el-select v-model="emp.emBloodType"
                           placeholder="请选择血型"
                           size="medium"
                           style="width: 260px;">
                  <el-option v-for="item in bloodTypes"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="工作城市:"
                            prop="emWorkCity">
                <el-select v-model="emp.emWorkCity"
                           placeholder="请选择工作城市"
                           size="medium"
                           style="width: 260px;">
                  <el-option v-for="item in cities"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="政治面貌:"
                            prop="emPosition">
                <el-select v-model="emp.emPosition"
                           placeholder="政治面貌"
                           size="medium"
                           style="width: 260px;">
                  <el-option v-for="item in politicsstatus"
                             :key="item.id"
                             :label="item.name"
                             :value="`${item.id}-${item.name}`">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="联系地址:"
                            prop="emAddress">
                <el-input size="medium"
                          style="width: 260px"
                          v-model="emp.emAddress"
                          placeholder="请输入联系地址"></el-input>
              </el-form-item>

              <el-form-item label="学历:"
                            prop="emDucation">
                <el-select v-model="emp.emDucation"
                           placeholder="学历"
                           size="medium"
                           style="width: 260px;">
                  <el-option v-for="item in tiptopDegrees"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

            </div>

          </el-col>
          <!-- 二列 -->
          <el-col :span="8">
            <div>

              <el-form-item label="性别:"
                            prop="emGender">
                <el-select v-model="emp.emGender"
                           placeholder="请选择性别"
                           size="medium"
                           style="width: 260px;">
                  <el-option v-for="item in genders"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="身份证号码:"
                            prop="emIdCard">
                <el-input size="medium"
                          style="width: 260px"
                          prefix-icon="el-icon-edit"
                          v-model="emp.emIdCard"
                          placeholder="请输入身份证号码"></el-input>
              </el-form-item>

              <el-form-item label="电子邮箱:"
                            prop="emEmail">
                <el-input size="medium"
                          style="width: 260px"
                          prefix-icon="el-icon-message"
                          v-model="emp.emEmail"
                          placeholder="请输入电子邮箱"></el-input>
              </el-form-item>

              <el-form-item label="电话号码:"
                            prop="emPhone">
                <el-input size="medium"
                          style="width: 260px"
                          prefix-icon="el-icon-phone"
                          v-model="emp.emPhone"
                          placeholder="电话号码"></el-input>
              </el-form-item>

              <el-form-item label="婚姻状况:"
                            prop="emWedlock">
                <el-select v-model="emp.emWedlock"
                           placeholder="请选择婚姻情况"
                           size="medium"
                           style="width: 260px;">
                  <el-option v-for="item in wedlocks"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="籍贯:"
                            prop="emNativePlace">
                <el-input size="medium"
                          style="width: 260px"
                          v-model="emp.emNativePlace"
                          placeholder="请输入籍贯"></el-input>
              </el-form-item>

              <el-form-item label="毕业院校:"
                            prop="emSchool">
                <el-input size="medium"
                          style="width: 260px"
                          v-model="emp.emSchool"
                          placeholder="请输入毕业院校"></el-input>
              </el-form-item>

              <el-form-item label="所属专业:"
                            prop="emSpeciaty">
                <el-input size="medium"
                          style="width: 260px"
                          v-model="emp.emSpeciaty"
                          placeholder="请输入所属专业"></el-input>
              </el-form-item>

            </div>
          </el-col>
          <!-- 三列 -->
          <el-col :span="8">
            <div>
              <el-form-item ref="uploadElement"
                            label="请选择头像：">
                <el-upload element-loading-spinner="el-icon-loading"
                           action="/employee-base/headadmin"
                           :headers="headers"
                           :show-file-list="false"
                           list-type="picture-card"
                           :on-success="onSuccess"
                           :on-progress="loadingChage">
                  <img title="点击修改用户头像"
                       :src="emp.emEmpFace"
                       style="width:145px;height:145px;"
                       alt="">
                </el-upload>
              </el-form-item>

              <el-form-item label="民族:"
                            prop="emNation">
                <el-select v-model="emp.emNation"
                           placeholder="民族"
                           size="medium"
                           style="width: 240px;">
                  <el-option v-for="item in nations"
                             :key="item.id"
                             :label="item.name"
                             :value="`${item.id}-${item.name}`">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div style="position: relative;top: 1px;">
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="over">取 消</el-button>
        <el-button type="primary"
                   @click="doAddEmp">确 定</el-button>
      </span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'PersStaffRoster',
  data() {
    return {
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr'),
      },
      admin: {},
      title: '',
      popVisible2: false,
      showAdvanceSearchView: false,

      emp: {
        id: 2,
        emId: 1,
        emName: '', //姓名
        emWorkId: '',
        emTypes: '',
        emGender: '', //性别
        emBirthday: '', //出生日期
        emEmpFace: '', //头像
        emNation: '',
        emIdCardType: '', //证件类型
        emIdCard: '', //身份证
        emWedlock: '',
        emBloodType: '', //血型
        emNativePlace: '', //籍贯
        emPosition: '', //政治面貌
        emEmail: '', //电子邮箱
        emPhone: '', //电话号码
        emAddress: '', //联系地址
        emIsleader: 0,
        emWorkCity: '', //工作城市
        emDepaName: '测试',
        emDucation: '', //学历
        emSpeciaty: '', //专业
        emSchool: '', //学校
        emPositionName: '',
      },
      emps: [],
      idCardTypes: [
        '居民身份证',
        '军官证',
        '护照',
        '港澳台身份证',
        '外国身份证',
      ], //证件类型的数组
      emTypes: [
        //员工类别
        '正式',
        '试用',
        '外派',
        '实习生',
        '合同生',
        '计件工',
        '服务派遣',
      ],
      cities: [], //城市
      genders: ['男', '女'], //性别
      wedlocks: ['已婚', '未婚', '离异'], //婚姻状况
      nations: [], //民族
      tiptopDegrees: [
        '本科',
        '大专',
        '硕士',
        '博士',
        '高中',
        '初中',
        '小学',
        '其他',
      ], //学历
      natives: [
        '中国',
        '美国',
        '英国',
        '法国',
        '德国',
        '加拿大',
        '阿根廷',
        '其他',
      ], //国籍
      bloodTypes: ['A', 'B', 'AB', 'O', '其他'], //血型
      politicsstatus: [], //政治面貌
      rules: {
        emName: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
        ],
        emIdCardType: [
          { required: true, message: '请选择证件类型', trigger: 'blur' },
        ],
        emBirthday: [
          { required: true, message: '请输入出生日期', trigger: 'blur' },
        ],

        emAddress: [
          { required: true, message: '请输入联系地址', trigger: 'blur' },
        ],
        entryDate: [
          { required: true, message: '请输入入职日期', trigger: 'blur' },
        ],
        emWorkCity: [
          { required: true, message: '请选择城市', trigger: 'blur' },
        ],
        emEmail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '邮箱格式不正确',
            trigger: 'blur',
          },
        ],
        emPhone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
              pattern:
              /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/,
            message: '电话号码格式不正确',
            trigger: 'blur',
          },
        ],
        emGender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        emIdCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          {
            pattern:
              /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: '身份证号码格式不正确',
            trigger: 'blur',
          },
        ],
        emWedlock: [
          { required: true, message: '请选择婚姻情况', trigger: 'blur' },
        ],
        emNation: [{ required: true, message: '请选择民族', trigger: 'blur' }],
        emDucation: [
          { required: true, message: '请选择学历', trigger: 'blur' },
        ],
        emBloodType: [
          { required: true, message: '请选择血型', trigger: 'blur' },
        ],
        emPosition: [
          { required: true, message: '请选择政治面貌', trigger: 'blur' },
        ],

        emNativePlace: [
          { required: true, message: '请输入籍贯', trigger: 'blur' },
        ],
        emSchool: [
          { required: true, message: '请输入毕业院校', trigger: 'blur' },
        ],
        emSpeciaty: [
          { required: true, message: '请输入所属专业', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    loadingChage(e) {
      console.log(e)
      this.loading = true
    },
    initData() {
      if (!window.sessionStorage.getItem('cities')) {
        this.getRequest('/emp/hotCities/').then((resp) => {
          if (resp) {
            this.cities = resp
            window.sessionStorage.setItem('cities', JSON.stringify(resp))
          }
        })
      } else {
        this.cities = JSON.parse(window.sessionStorage.getItem('cities'))
      }
      if (!window.sessionStorage.getItem('nations')) {
        this.getRequest('/emp/nation').then((resp) => {
          if (resp) {
            this.nations = resp
            window.sessionStorage.setItem('nations', JSON.stringify(resp))
          }
        })
      } else {
        this.nations = JSON.parse(window.sessionStorage.getItem('nations'))
      }
      if (!window.sessionStorage.getItem('politicsstatus')) {
        this.getRequest('/politics-status/').then((resp) => {
          if (resp) {
            this.politicsstatus = resp
            window.sessionStorage.setItem(
              'politicsstatus',
              JSON.stringify(resp)
            )
          }
        })
      } else {
        this.politicsstatus = JSON.parse(
          window.sessionStorage.getItem('politicsstatus')
        )
      }
    },
    onSuccess(res) {
      console.log(res)
      this.emp.emEmpFace = res
    },
    doAddEmp() {
      this.$refs['empForm'].validate((valid) => {
        if (valid) {
            let uuid1 =Math.random()+'';
        this.emp.id=uuid1.substring(uuid1.length-8);
          this.postRequest('/employee-base/es/employ/', this.emp).then(
            (resp) => {}
          )
        }
      })
    },
    over() {
      this.$confirm('确定要取消吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.emp = {
          id: 1,
          emId: 1,
          emName: '', //姓名
          emWorkId: '',
          emTypes: '',
          emGender: '', //性别
          emBirthday: '', //出生日期
          emEmpFace: '', //头像
          emNation: '',
          emIdCardType: '', //证件类型
          emIdCard: '', //身份证
          emWedlock: '',
          emBloodType: '', //血型
          emNativePlace: '', //籍贯
          emPosition: '', //政治面貌
          emEmail: '', //电子邮箱
          emPhone: '', //电话号码
          emAddress: '', //联系地址
          emIsleader: '',
          emWorkCity: '', //工作城市
          emDepaName: '测试',
          emDucation: '', //学历
          emSpeciaty: '', //专业
          emSchool: '', //学校
          emPositionName: '',
        }
      })
    },
  },
}
</script>
<style>
</style>